/*
 * @Description: 列表
 * @Author: Zzt
 * @Date: 2022-11-27 16:43:08
 * @LastEditTime: 2022-12-05 11:41:31
 */

import { IPageQuery } from '@/interfaces/global';
import { Button, Table } from 'antd';
import Column from 'antd/es/table/Column';
import { useEffect, useMemo, useState } from 'react';
import { useAccountContext } from '../contexts/AccountContext';
import EditReport from './dialogs/EditReport';
import ReportEdit from './dialogs/ReportEdit';

const dataJson = [{}];
const List = () => {
  const { selectItems, setSelectKey, getAccountList, annualList } = useAccountContext();
  const [editReportVisible, setEditReportVisible] = useState(false);
  const [reportData, setReportData] = useState();
  const [reportEditVisible, setReportEditVisible] = useState(false);
  const [editJson, setEditJson] = useState();
  const [able, setAble] = useState(false);
  // 表格加载
  const [loading, setLoading] = useState(false);
  // 总条目数
  const [total, setTotal] = useState(0);
  // 表格请求参数
  const [listQuery, setListQuery] = useState<IPageQuery>({
    pageNo: 1,
    pageSize: 10,
    param: {}
  });

  useEffect(() => {
    setLoading(true);
    if (listQuery) {
      setLoading(false);
      setTotal(0);
      getAccountList(listQuery);
      // .then((res: any) => {
      //   setTotal(res?.totalCount);
      // })
      // .finally(() => {
      //   setLoading(false);
      // });
    }
  }, [listQuery]);

  /**
   * @description 切换页码触发
   * @param {number} page 页码
   * @param {number} pageSize 每页条目数
   */
  const pageChange = (page: number, pageSize: number) => {
    setListQuery((state) => ({
      ...state,
      pageNo: page,
      pageSize
    }));
  };
  // 表格选项相关设置
  const onSelectChange = (selectedKeys: number[]): void => {
    setSelectKey(selectedKeys);
  };

  const rowSelection = {
    selectItems,
    onChange: onSelectChange
  };
  const editAccount = (val: any) => {
    setReportData(val);
    setAble(false);
    setEditReportVisible(true);
  };
  const lookAccount = (val: any) => {
    setReportData(val);
    setAble(true);
    setEditReportVisible(true);
  };
  const editReportEdit = (val: any) => {
    setEditJson({ ...val, dataJson });
    setReportEditVisible(true);
  };
  return (
    <>
      <Table
        dataSource={annualList}
        loading={loading}
        rowKey="id"
        rowSelection={rowSelection}
        pagination={{
          current: listQuery.pageNo,
          pageSize: listQuery.pageSize,
          total,
          onChange: pageChange
        }}
        scroll={{
          x: 'max-content'
        }}
        bordered
      >
        <Column title="序号" dataIndex="id" key="id" align="center" />
        <Column title="创建时间" dataIndex="cDescription" key="cDescription" align="center" />
        <Column title="类型" dataIndex="type" key="type" align="center" />
        <Column title="负责人" dataIndex="cNo" key="cNo" align="center" />
        <Column title="填表人" dataIndex="cDescription" key="cDescription" align="center" />
        <Column title="填表人联系电话" dataIndex="cDescription" key="cDescription" align="center" />
        <Column title="上报日期" dataIndex="cDescription" key="cDescription" align="center" />
        <Column title="审核时间" dataIndex="cDescription" key="cDescription" align="center" />
        <Column title="状态" dataIndex="status" key="status" align="center" />
        <Column
          title="数据编辑"
          key="reportEdit"
          align="center"
          render={(_text, record: any) => (
            <>
              <Button
                type="link"
                onClick={() => {
                  editReportEdit(record);
                }}
              >
                编辑
              </Button>
              {/* <Button type="link">
                查看
                <CheckCircleTwoTone />
              </Button> */}
            </>
          )}
        />
        <Column
          title="操作"
          key="action"
          align="center"
          render={(_text, record: any) => (
            <>
              <Button
                size="small"
                type="link"
                onClick={() => {
                  editAccount(record);
                }}
              >
                修改/
              </Button>
              <Button
                size="small"
                type="link"
                danger
                onClick={() => {
                  lookAccount(record);
                }}
              >
                查看
              </Button>
              <Button
                type="link"
                size="small"
                // onClick={() => {
                //   addSameLevelClassify(record.pid);
                // }}
              >
                /提交审核
              </Button>
            </>
          )}
        />
      </Table>
      {useMemo(
        () => (
          <EditReport
            visible={editReportVisible}
            onClose={() => {
              setEditReportVisible(false);
            }}
            data={reportData}
            able={able}
          />
        ),
        [editReportVisible]
      )}
      {useMemo(
        () => (
          <ReportEdit
            visible={reportEditVisible}
            onClose={() => {
              setReportEditVisible(false);
            }}
            data={editJson}
          />
        ),
        [reportEditVisible]
      )}
    </>
  );
};
export default List;
